<template>
    <div class="apparatus-room-search-container">
        <el-form ref="queryFormRef" :model="queryParamsModel" :inline="true">
            <!-- <el-form-item prop="cityList" label="地市">
                <el-select
                    v-model="cityListModelRef"
                    multiple
                    collapse-tags
                    clearable
                    placeholder="全部"
                    style="width: 180px"
                >
                    <el-option
                        v-for="item in cityOptionsRef"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item> -->

            <!-- <el-form-item prop="cityList" label="机房产权">
                <el-select
                    v-model="ownershipModelRef"
                    multiple
                    collapse-tags
                    clearable
                    placeholder="全部"
                    style="width: 180px"
                >
                    <el-option
                        v-for="item in ownershipListRef"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item> -->

            <el-form-item prop="roomCategory" label="机房分类">
                <el-select
                    v-model="queryParamsModel.roomCategoryList"
                    multiple
                    collapse-tags
                    clearable
                    placeholder="全部"
                    style="width: 180px"
                >
                    <el-option
                        v-for="item in roomCategoryListRef"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="isAnchorRoom" label="是否锚点机房">
                <el-select
                    v-model="queryParamsModel.isAnchorRoom"
                    collapse-tags
                    clearable
                    placeholder="全部"
                    style="width: 180px"
                >
                    <el-option
                        :key="1"
                        label="是"
                        :value="true"
                    />
                    <el-option
                        :key="0"
                        label="否"
                        :value="false"
                    />
                </el-select>
            </el-form-item>

            <!-- <el-form-item label="关键字" prop="keywords">
                <el-input
                    v-model="queryParamsRef.keyWord"
                    placeholder="机房编号/区县/位置"
                    clearable
                    style="width: 200px"
                />
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" @click="queryTable"
                    ><ElSvgIcon
                        a-icon-name="el-icon-search"
                        :aSize="15"
                    />&nbsp;搜索</el-button
                >
                <el-button @click="resetQuery"
                    ><el-icon-refresh
                        style="width: 1em; height: 1em; margin-right: 3px"
                    />重置</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { TypeApparatusRoomVoQueryI } from "@/api/current_status/apparatus_room/current_status_apparatus_room_type";
import * as dictApi from "@/api/dict/dict_api_index";
import { TypeRequirementPoolTableQueryI } from "@/api/requirement_pool/requirement_pool_types";
import { $bus } from "@/event_bus/event_bus_index";
import { NslUtil4Vue } from "@/utils/NslUtil4Vue";
import { labelInner } from "echarts/types/src/label/labelStyle.js";
import { ElForm } from "element-plus";
import { onMounted, PropType, ref, watchEffect } from "vue";

//todo:
// const queryParamsRef = ref<TypeApparatusRoomVoQueryI>({
//     keyWord: undefined,
// });

const queryParamsModel = defineModel({
    type: Object as PropType<TypeApparatusRoomVoQueryI>,
    required: true,
});

const queryParamsInit:TypeApparatusRoomVoQueryI={
    pageNum:1,
    pageSize:10,
    isAnchorRoom:undefined,
    roomCategoryList:undefined,
    period:'before'
}

const cityListModelRef = ref<string>();
const ownershipModelRef = ref<string>();
const roomCategoryModelRef = ref<string>();

const cityOptionsRef = ref<TypeOptionI[]>();
const ownershipListRef = ref<TypeOptionI[]>();
const roomCategoryListRef = ref<TypeOptionI[]>();

cityOptionsRef.value = [
    {
        value: "郑州",
        label: "郑州",
    },
    {
        value: "洛阳",
        label: "洛阳",
    },
    {
        value: "开封",
        label: "开封",
    },
    {
        value: "新乡",
        label: "新乡",
    },
    {
        value: "安阳",
        label: "安阳",
    },
    {
        value: "濮阳",
        label: "濮阳",
    },
];

ownershipListRef.value = [
    {
        value: "自有",
        label: "自有",
    },
    {
        value: "铁塔",
        label: "铁塔",
    },
    {
        value: "第三方",
        label: "第三方",
    }]

roomCategoryListRef.value = [
    {
        value: "基站机房",
        label: "基站机房",
    },
    {
        value: "接入机房",
        label: "接入机房",
    },
    {
        value: "汇聚局站",
        label: "汇聚局站",
    },
    {
        value: "核心局站",
        label: "核心局站",
    },
];

const queryTable = () => {
    $bus.emit('bbu-return-room-table-query');
};
const resetQuery = () => {
    queryParamsModel.value=Object.assign({},queryParamsInit);
    queryTable();
};
</script>
<style lang="scss" scoped></style>
